<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${title} + ' - 王氏美容汽车集团管理系统'">订单统计分析 - 王氏美容汽车集团管理系统</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    
    <style>
        .dashboard-card {
            border: none;
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s;
        }
        .dashboard-card:hover {
            transform: translateY(-5px);
        }
        .chart-container {
            position: relative;
            height: 400px;
        }
        .stat-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 15px;
        }
    </style>
</head>
<body class="bg-light">
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container-fluid">
            <a class="navbar-brand" href="/">
                <i class="fas fa-car me-2"></i>王氏美容汽车集团
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/dashboard">
                            <i class="fas fa-tachometer-alt me-1"></i>仪表盘
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="/dashboard/orders">
                            <i class="fas fa-chart-line me-1"></i>订单统计
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/customers">
                            <i class="fas fa-users me-1"></i>客户管理
                        </a>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                            <i class="fas fa-user me-1"></i>管理员
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="/profile">个人资料</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="/logout">退出登录</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container-fluid mt-4">
        <!-- 页面标题 -->
        <div class="row mb-4">
            <div class="col">
                <h2><i class="fas fa-chart-line me-2"></i>订单统计分析</h2>
                <p class="text-muted">全面分析订单数据，掌握业务动态</p>
            </div>
            <div class="col-auto">
                <button class="btn btn-primary" onclick="refreshData()">
                    <i class="fas fa-sync-alt me-2"></i>刷新数据
                </button>
            </div>
        </div>

        <!-- 统计概览 -->
        <div class="row mb-4">
            <div class="col-lg-3 col-md-6 mb-3">
                <div class="card stat-card">
                    <div class="card-body text-center">
                        <i class="fas fa-shopping-cart fa-3x mb-3"></i>
                        <h3 class="mb-1" id="totalOrders">0</h3>
                        <p class="mb-0">总订单数</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 mb-3">
                <div class="card stat-card">
                    <div class="card-body text-center">
                        <i class="fas fa-plus-circle fa-3x mb-3"></i>
                        <h3 class="mb-1" id="todayOrders">0</h3>
                        <p class="mb-0">今日订单</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 mb-3">
                <div class="card stat-card">
                    <div class="card-body text-center">
                        <i class="fas fa-dollar-sign fa-3x mb-3"></i>
                        <h3 class="mb-1" id="todayRevenue">¥0</h3>
                        <p class="mb-0">今日营收</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 mb-3">
                <div class="card stat-card">
                    <div class="card-body text-center">
                        <i class="fas fa-chart-bar fa-3x mb-3"></i>
                        <h3 class="mb-1" id="monthRevenue">¥0</h3>
                        <p class="mb-0">本月营收</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 图表区域 -->
        <div class="row mb-4">
            <!-- 订单趋势图 -->
            <div class="col-lg-8 mb-3">
                <div class="card dashboard-card">
                    <div class="card-header bg-white">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-chart-line me-2"></i>订单趋势分析
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="chart-container">
                            <canvas id="orderTrendChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 订单状态分布 -->
            <div class="col-lg-4 mb-3">
                <div class="card dashboard-card">
                    <div class="card-header bg-white">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-chart-pie me-2"></i>订单状态分布
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="chart-container">
                            <canvas id="orderStatusChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 服务项目统计 -->
        <div class="row mb-4">
            <div class="col-lg-6 mb-3">
                <div class="card dashboard-card">
                    <div class="card-header bg-white">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-star me-2"></i>热门服务项目
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="chart-container">
                            <canvas id="popularServicesChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 营收分析 -->
            <div class="col-lg-6 mb-3">
                <div class="card dashboard-card">
                    <div class="card-header bg-white">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-money-bill-wave me-2"></i>月度营收分析
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="chart-container">
                            <canvas id="revenueChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 数据表格 -->
        <div class="row">
            <div class="col-12">
                <div class="card dashboard-card">
                    <div class="card-header bg-white">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-table me-2"></i>订单数据概览
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-info" role="alert">
                            <i class="fas fa-info-circle me-2"></i>
                            订单管理功能正在开发中，敬请期待！
                        </div>
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>时间段</th>
                                        <th>订单数量</th>
                                        <th>完成订单</th>
                                        <th>营收金额</th>
                                        <th>平均客单价</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>今日</td>
                                        <td>0</td>
                                        <td>0</td>
                                        <td>¥0.00</td>
                                        <td>¥0.00</td>
                                    </tr>
                                    <tr>
                                        <td>昨日</td>
                                        <td>0</td>
                                        <td>0</td>
                                        <td>¥0.00</td>
                                        <td>¥0.00</td>
                                    </tr>
                                    <tr>
                                        <td>本周</td>
                                        <td>0</td>
                                        <td>0</td>
                                        <td>¥0.00</td>
                                        <td>¥0.00</td>
                                    </tr>
                                    <tr>
                                        <td>本月</td>
                                        <td>0</td>
                                        <td>0</td>
                                        <td>¥0.00</td>
                                        <td>¥0.00</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- 页面脚本 -->
    <script>
        let orderTrendChart, orderStatusChart, popularServicesChart, revenueChart;

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            initCharts();
            loadData();
        });

        // 初始化图表
        function initCharts() {
            // 订单趋势图
            const orderTrendCtx = document.getElementById('orderTrendChart').getContext('2d');
            orderTrendChart = new Chart(orderTrendCtx, {
                type: 'line',
                data: {
                    labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
                    datasets: [{
                        label: '订单数量',
                        data: [0, 0, 0, 0, 0, 0],
                        borderColor: 'rgb(75, 192, 192)',
                        backgroundColor: 'rgba(75, 192, 192, 0.1)',
                        tension: 0.4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });

            // 订单状态分布图
            const orderStatusCtx = document.getElementById('orderStatusChart').getContext('2d');
            orderStatusChart = new Chart(orderStatusCtx, {
                type: 'doughnut',
                data: {
                    labels: ['待处理', '进行中', '已完成', '已取消'],
                    datasets: [{
                        data: [0, 0, 0, 0],
                        backgroundColor: [
                            '#ffc107',
                            '#17a2b8',
                            '#28a745',
                            '#dc3545'
                        ]
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom'
                        }
                    }
                }
            });

            // 热门服务项目图
            const popularServicesCtx = document.getElementById('popularServicesChart').getContext('2d');
            popularServicesChart = new Chart(popularServicesCtx, {
                type: 'bar',
                data: {
                    labels: ['洗车', '打蜡', '抛光', '镀膜', '内饰清洁'],
                    datasets: [{
                        label: '订单数量',
                        data: [0, 0, 0, 0, 0],
                        backgroundColor: [
                            '#007bff',
                            '#28a745',
                            '#ffc107',
                            '#dc3545',
                            '#6f42c1'
                        ]
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });

            // 营收分析图
            const revenueCtx = document.getElementById('revenueChart').getContext('2d');
            revenueChart = new Chart(revenueCtx, {
                type: 'bar',
                data: {
                    labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
                    datasets: [{
                        label: '营收金额',
                        data: [0, 0, 0, 0, 0, 0],
                        backgroundColor: 'rgba(54, 162, 235, 0.8)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }

        // 加载数据
        function loadData() {
            // 加载概览数据
            fetch('/dashboard/api/overview')
                .then(response => response.json())
                .then(data => {
                    const orders = data.orders || {};
                    document.getElementById('totalOrders').textContent = orders.total || 0;
                    document.getElementById('todayOrders').textContent = orders.todayNew || 0;
                    document.getElementById('todayRevenue').textContent = 
                        '¥' + (orders.todayRevenue || 0).toFixed(2);
                    document.getElementById('monthRevenue').textContent = 
                        '¥' + (orders.monthRevenue || 0).toFixed(2);
                })
                .catch(error => console.error('加载概览数据失败:', error));

            // 加载图表数据
            fetch('/dashboard/api/order-charts')
                .then(response => response.json())
                .then(data => {
                    // 这里可以根据实际返回的数据更新图表
                    console.log('订单图表数据:', data);
                })
                .catch(error => console.error('加载图表数据失败:', error));
        }

        // 刷新数据
        function refreshData() {
            loadData();
        }

        // 定时刷新数据
        setInterval(refreshData, 60000); // 每分钟刷新一次
    </script>
</body>
</html>
